<script lang='tsx' name='SongCard' setup>

type Props = {
    minWidth?: string,
    maxWidth?: string,
    title: string,
    tip?: string,
    aspectRatio?: string,
    width?: string,
    countVisible?: boolean
}
const {
    minWidth = '136px',
    maxWidth = '196px',
    aspectRatio = '0.71/1',
    countVisible = true,
    title,
    tip = '',

} = defineProps<Props>()

// const emit = defineEmits<{
//   refresh?: []
// }>()
const emit = defineEmits<{
    (e: 'refresh'): void
}>()


</script>

<template>
    <div class='song-card-container'>
        <div class="tip" v-if="!!tip">{{ tip }}</div>
        <div class="play-count" v-else-if="countVisible">
            <SvgIcon name="headset" :h="12" :w="12" fill="#fff"></SvgIcon>
        </div>
        <div class="title-warpper">
            <p class="title">{{ title }}</p>
            <ul></ul>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.song-card-container {
    cursor: pointer;
    position: relative;
    display: inline-flex;
    min-width: v-bind(minWidth);
    max-width: v-bind(maxWidth);
    aspect-ratio: v-bind(aspectRatio);
    background-color: antiquewhite;
    border-radius: 12px;
    overflow: hidden;

    .tip {
        position: absolute;
        top: 8px;
        left: 10px;
        font-size: 18px;
        color: #fff;
    }

    .play-count {
        position: absolute;
        top: 10px;
        right: 20px;
    }

    .title-warpper {
        @include fold();
        height: 67%;
        position: absolute;
        bottom: -48%;
        left: 0;
        right: 0;
        padding: 8px 12px;
        background-color: rgba(0, 0, 0, .5);
        color: #fff;
        font-size: 14px;

        .title {
            height: 30%;
            line-height: 1.4;
            @include text-ellipsis(2)
        }
    }

    &:hover {
        .title-warpper {
            bottom: 0;
        }
    }
}
</style>
